<template>
  <div class="main">
    <div class="back_img"></div>
    <div class="login">
      <div class="login_title">
        <h1>高考志愿后台管理系统</h1>
      </div>
      <div class="login_input">
        <el-input
          prefix-icon="el-icon-user"
          placeholder="请输入账号"
          v-model="from.userNmae"
        ></el-input>
      </div>
      <div class="login_input">
        <el-input
          prefix-icon="el-icon-unlock"
          placeholder="请输入密码"
          show-password
          v-model="from.passWord"
        ></el-input>
      </div>
      <div class="login_button">
        <p @click="login">登录</p>
        <p>注册</p>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        from: {
          userNmae: "admin",
          passWord: "123",
        },
      };
    },
    methods: {
      login() {
        if (this.from.userNmae == "admin" && this.from.passWord == "123") {
          localStorage.setItem("token", "111")//这样的话 我们的任意的一个页都是可以获得我们的token
          alert("登录成功");
          this.$router.push("/home");//跳转到我们的home位置
        } else {
          alert("登录失败");
        }
      },
    },
  };
</script>

<style scoped>
  .back_img {
    background: url("https://img0.baidu.com/it/u=1987091173,362891579&fm=26&fmt=auto");
    background-size: 100% 100%;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .login {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /*background: #fff;*/
    /* background: #65768557; */
    padding: 30px;
    width: 25%;
    box-shadow: cyan;
    /*border: 1px solid #eee;*/
    border-radius: 20px;
  }

  .login_title {
    text-align: center;
    padding-bottom: 20px;
  }

  .login_input:nth-child(2) {
    margin-bottom: 20px;
  }

  .login_input:nth-child(3) {
    margin-top: 20px;
  }

  .login_button {
    margin-top: 20px;
    display: flex;
  }

  .login_button p {
    color: #fff;
    font-size: 15px;
    display: block;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    width: 100%;
    border: 1px solid #ddd;
  }

  .login_button p:nth-child(1) {
    background: #409eff;
    margin-right: 10px;
  }

  .login_button p:nth-child(2) {
    background: #67c23a;
    margin-left: 10px;
  }
</style>
